<template>
  <div class="photo-upload-root">
    <el-divider class="divider" content-position="left" ></el-divider>
    <el-upload
        drag
        multiple
        class="upload"
        :on-success="success"
        :on-error="error"
        :action="uploadAction"
        :headers="{'authorization':accessToken}"
        :disabled="!isLogin"
        >
      <i class="el-icon-upload" style="margin-top: 5px;margin-bottom: 0;" @contextmenu.prevent="showHistory"></i>
      <div class="el-upload__text" style="font-size: 9px;" @contextmenu.prevent="showHistory">
        拖动或点我上传
        <br/>
        右键还能看历史喔~
        <br/>
        <em>ლ(╹◡╹ლ)</em>
      </div>
    </el-upload>

    <el-dialog title="上传历史" :visible.sync="historyVisible" width="60%" class="bjs-dialog" style="margin-top: -20px;">
      <span> 成功：</span><span>{{upSuccess}}</span> ； 失败：{{upError}}
      <el-table
          border
          id="historyTable"
          size="mini"
          class="bjs-table-mini"
          style="width: 100%;min-height: 400px;max-height: 400px;overflow: auto"
          @cell-click="cellClick"
          :data="upHistoryList">
        <el-table-column prop="name"   min-width="210" :show-overflow-tooltip="true" label="文件名"></el-table-column>
        <el-table-column prop="url"    min-width="70"  :show-overflow-tooltip="true" label="路径,点击复制" ></el-table-column>
        <el-table-column prop="result" min-width="100" :show-overflow-tooltip="true" label="结果" align="center"></el-table-column>
        <el-table-column prop="time"   min-width="70"  :show-overflow-tooltip="true" label="时间" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" class="bjs-button" @click="clearHistory">清空</el-button>
        <el-button size="mini" class="bjs-button" @click="historyVisible=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { clipboard } from 'electron'
export default {
  name: 'uploadMultiple',
  data () {
    return {
      historyVisible : false
    }
  },
  watch: {
    upListLength () {
      this.autoToBottom()
    }
  },
  methods : {
    success (resp, file) {
      let his = {
        name : file.name,
        url : resp.data,
        result : resp.msg,
        time: new Date().toLocaleTimeString()
      }
      this.$store.commit('ADD',his)
    },
    error (err, file) {
      let his = {
        name : file.name,
        url : '错误',
        result : JSON.parse(err.message).msg, // err by new Error([message[, fileName[, lineNumber]]]),
        time: new Date().toLocaleTimeString()
      }
      this.$store.commit('ADD',his)
    },
    clearHistory () {
      this.$store.commit('CLEAR')
    },
    showHistory () {
      this.historyVisible = true
    },
    cellClick (row) {
      clipboard.writeText(row.url);
    },
    autoToBottom () {
      let div = document.getElementById('historyTable')
      div.scrollTop = div.scrollHeight
    }
  },
  computed: {
    upListLength  () {return this.$store.state.upHistory.list.length},
    upHistoryList () {return this.$store.state.upHistory.list},
    upSuccess     () {return this.$store.state.upHistory.successNum},
    upError       () {return this.$store.state.upHistory.errorNum},
    accessToken   () {return this.$GLOBAL.LOGIN.TOKEN_PREFIX + this.$store.state.config.login.accessToken},
    uploadAction  () {return this.$store.state.config.login.serverUrl + '/picture/upload'},
    isLogin ()       {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS}
  }
}
</script>

<style scoped lang="scss">
  .photo-upload-root {
    @include themeBgColor(#f5f5f5,#403e44);
    max-height: 42%;
    min-height: 42%;

    .upload {
      em {
        @include themeColor($theme-color-light,$theme-color-night-dark);
      }
      /deep/ .el-upload__text {
        @include themeColor($theme-color-light-7,$theme-color-night-dark-7);
      }
      /deep/ .el-icon-upload {
        font-size: 50px;
      }
      /deep/ .el-upload-dragger {
        @include boxBase(100px,100px);
        @include themeBgColor(#f5f5f5,$theme-bg-color-night);
        @include themeBorder(1px,$theme-color-light,$theme-color-night-dark-7,around);
        border-style: dashed;
      }
      /deep/ .el-upload-dragger:hover {
        @include themeBgColor(#f5f5f5,$theme-bg-color-night);
        @include themeBorder(1px,$theme-color-light-dark,$theme-color-night-dark,around);
        border-style: dashed;
      }
      /deep/ .el-upload-list {
        max-height: 140px;
        overflow: auto;
      }
      /deep/ .el-upload-list__item {
        font-size: 12px;
        margin-top: 0;
      }
      /deep/ .el-icon-upload {
        @include themeColor(#dcdcdc,#403e44);
      }
      /deep/ .el-icon-document {
        &:before {
          content: none;
        }
      }
      /deep/ .el-upload-list__item-name {
        text-align: left;
        margin-right: 25px;
        padding: 0;
      }
    }
  }
</style>
